<template>
  <div class="video">
    <h3>{{exObj.content}}</h3>
    <div ref="video" id="video" />
    <p v-show="quesStatus.status !== 3 && quesStatus.status !== 4">* 观看视频后点击开始考试</p>
    <van-button :disabled="quesStatus.status == 3 || quesStatus.status == 4" style="margin-top:calc(54rem/75)" type="danger" class="btn" @click="submit">开始考试</van-button>
    <van-popup v-model="show" get-container="body">
      <div class="show-modal">
        <span class="close" @click="show = false">x</span>
        <p class="content" v-html="msg" />
      </div>
    </van-popup>
  </div>
</template>

<script>
import ChimeeMobilePlayer from 'chimee-mobile-player'
import chimeePluginMobileControlbar from 'chimee-plugin-mobile-controlbar'
ChimeeMobilePlayer.install(chimeePluginMobileControlbar)
import { mapGetters } from 'vuex'
import { trained } from 'api'
import loginVue from '@/views/login.vue'
import { log } from 'async'
export default {
  name: 'videoPlay',
  data() {
    return {
      ChimeePlayer: null,
      complete: false,
      show: false,
      msg: '很遗憾，您未通过考试',
      back: false
    }
  },
  computed: {
    ...mapGetters(['ques', 'failArr', 'quesListId', 'quesStatus', 'exObj'])
  },
  mounted() {
    this.videoInit()
  },
  watch: {
    show(val) {
      if (!val && this.back) {
        this.$router.push('/list')
      }
    }
  },
  methods: {
    videoInit() {
      if (!this.ChimeePlayer) {
        this.ChimeePlayer = new ChimeeMobilePlayer({
          wrapper: this.$refs.video, // video dom容器
          src: this.exObj.video_url,
          autoplay: false,
          controls: true,
          playsInline: true,
          preload: true,
          x5VideoPlayerFullscreen: true,
          x5VideoOrientation: true,
          xWebkitAirplay: true,
          muted: false,
          fullscreenElement: 'video',
          plugin: [
            {
              name: chimeePluginMobileControlbar.name,
              majorColor: '#fff',
              children: {
                play: {},
                currentTime: {},
                totalTime: {},
                screen: {}
              }
            }
          ]
        })
      }
      // this.ChimeePlayer.on('play', e => {
      //   e.target.controls = false
      //   this.ChimeePlayer.playsInline = false
      // })
      // this.ChimeePlayer.on('pause', () => {
      //   this.ChimeePlayer.playsInline = true
      // })
      this.ChimeePlayer.on('timeupdate', e => {
        const total = e.target.duration
        const current = e.target.currentTime
        if (total && current / total > 0.8) {
          this.complete = true
          trained({ id: this.quesListId })
        }
      })
    },
    async submit() {
      if (this.quesStatus.status == 1 && !this.complete) {
        this.msg = '你还未看完视频，<br/>请观看完，再参与考试。'
        this.show = true
        return
      }
      this.$router.replace({ path: 'exam', query: { ques: 0 } })
    }
  }
}
</script>

<style lang="stylus">
.video
  padding 0 87px
  width 562px
  min-height 764px
  position absolute
  top 50%
  left 50%
  margin-left -281px
  margin-top -382px
  // top: 0; left: 0; bottom: 0; right: 0;
  // transform: translateY(-50%);
  background url('../assets/img/container.png') center center no-repeat
  background-size 100% 100%
  box-sizing border-box

  h3
    margin 110px auto 60px
    font-size 24px
    color #df2325

  p
    color #df2325
    font-size 14px

  #video
    width 100%
    height 242px
</style>
